<template>
    <div>
        <h1>我是Home，我可以收到对应的app的参数,具体内容是{{$route.query.msg}}</h1>
       
    </div>
</template>
<script>
export default {
    props:["msg"],
    data(){
        return{
            opacity:1,
        }
    },
    mounted(){
        //console.log(this.$route)
        //console.log(`接收到路由的信息数据是${msg}`)
        console.log(`我是Home组件,收到的数据是${this.msg}`)
    },
    /*
    路由组件有自己的两个声明周期，分别是actived，和deactived这两个
    这两个声明周期钩子是路由组件特有的函数
    */
   //路由的组件被激活的时候会调用这个函数，可以在这个函数内部setInterval
   activated(){
        console.log('Home组件被激活')
        this.timer=setInterval(()=>{
            console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
        },16)
   },
   //离开这个组件的时候就会调用这个函数
   deactivated(){
    console.log('home组件失活')
    //离开组件的时候，可以在这个clearInterval
    clearInterval(this.timer)
   }
}
</script>
<style>
h1{
    text-align: left;
    padding: 0;
    margin: 0;
}
</style>